<template>
  <a-card title="评价相关教学班配置" :bordered="false">
    <div class="table-operator">
      <a-button type="primary" icon="plus" @click="handleAdd">新增配置</a-button>
      <a-button @click="handleBatchDelete" style="margin-left: 8px">批量删除</a-button>
    </div>

    <a-table
      :columns="columns"
      :data-source="data"
      :row-selection="{ selectedRowKeys: selectedRowKeys, onChange: onSelectChange }"
      :pagination="pagination"
      row-key="id"
      size="middle"
      @change="handleTableChange"
    >
      <template slot="courseType" slot-scope="text">
        <a-tag :color="text === '必修' ? 'blue' : 'green'">{{ text }}</a-tag>
      </template>
      <template slot="status" slot-scope="text">
        <a-badge :status="text === '启用' ? 'processing' : 'default'" :text="text" />
      </template>
      <template slot="action" slot-scope="text, record">
        <a-button type="link" size="small" @click="handleEdit(record)">编辑</a-button>
        <a-button type="link" size="small" @click="handleDelete(record)">删除</a-button>
      </template>
    </a-table>

    <a-modal
      :title="modalTitle"
      :visible="visible"
      @ok="handleOk"
      @cancel="handleCancel"
      :confirm-loading="confirmLoading"
      width="800px"
    >
      <a-form :form="form" layout="vertical">
        <a-row :gutter="16">
          <a-col :span="12">
            <a-form-item label="学年学期">
              <a-select
                v-decorator="[
                  'academicTerm',
                  { rules: [{ required: true, message: '请选择学年学期' }] }
                ]"
                placeholder="请选择学年学期"
              >
                <a-select-option value="2024-2024-1">2024-2024学年第一学期</a-select-option>
                <a-select-option value="2024-2024-2">2024-2024学年第二学期</a-select-option>
              </a-select>
            </a-form-item>
          </a-col>
          <a-col :span="12">
            <a-form-item label="课程">
              <a-select
                v-decorator="['course', { rules: [{ required: true, message: '请选择课程' }] }]"
                placeholder="请选择课程"
                show-search
                option-filter-prop="children"
              >
                <a-select-option value="CS101">计算机科学导论</a-select-option>
                <a-select-option value="CS201">数据结构</a-select-option>
                <a-select-option value="CS301">人工智能基础</a-select-option>
              </a-select>
            </a-form-item>
          </a-col>
        </a-row>

        <a-row :gutter="16">
          <a-col :span="12">
            <a-form-item label="教学班">
              <a-select
                v-decorator="['teachingClass', { rules: [{ required: true, message: '请选择教学班' }] }]"
                placeholder="请选择教学班"
                mode="multiple"
              >
                <a-select-option value="CS101-01">CS101-01班</a-select-option>
                <a-select-option value="CS101-02">CS101-02班</a-select-option>
                <a-select-option value="CS201-01">CS201-01班</a-select-option>
              </a-select>
            </a-form-item>
          </a-col>
          <a-col :span="12">
            <a-form-item label="课程类型">
              <a-select
                v-decorator="['courseType', { rules: [{ required: true, message: '请选择课程类型' }] }]"
                placeholder="请选择课程类型"
              >
                <a-select-option value="必修">必修</a-select-option>
                <a-select-option value="选修">选修</a-select-option>
              </a-select>
            </a-form-item>
          </a-col>
        </a-row>

        <a-row :gutter="16">
          <a-col :span="12">
            <a-form-item label="任课教师">
              <a-select
                v-decorator="['teacher', { rules: [{ required: true, message: '请选择任课教师' }] }]"
                placeholder="请选择任课教师"
                mode="multiple"
              >
                <a-select-option value="T001">李红梅</a-select-option>
                <a-select-option value="T002">李娜</a-select-option>
                <a-select-option value="T003">王芳</a-select-option>
              </a-select>
            </a-form-item>
          </a-col>
          <a-col :span="12">
            <a-form-item label="状态">
              <a-select
                v-decorator="['status', { rules: [{ required: true, message: '请选择状态' }] }]"
                placeholder="请选择状态"
              >
                <a-select-option value="启用">启用</a-select-option>
                <a-select-option value="禁用">禁用</a-select-option>
              </a-select>
            </a-form-item>
          </a-col>
        </a-row>

        <a-form-item label="评价说明">
          <a-textarea
            v-decorator="['description']"
            placeholder="请输入评价说明"
            :rows="3"
          />
        </a-form-item>
      </a-form>
    </a-modal>
  </a-card>
</template>

<script>
const columns = [
  {
    title: '学年学期',
    dataIndex: 'academicTerm',
    key: 'academicTerm'
  },
  {
    title: '课程',
    dataIndex: 'course',
    key: 'course'
  },
  {
    title: '教学班',
    dataIndex: 'teachingClass',
    key: 'teachingClass'
  },
  {
    title: '课程类型',
    dataIndex: 'courseType',
    key: 'courseType',
    scopedSlots: { customRender: 'courseType' }
  },
  {
    title: '任课教师',
    dataIndex: 'teacher',
    key: 'teacher'
  },
  {
    title: '状态',
    dataIndex: 'status',
    key: 'status',
    scopedSlots: { customRender: 'status' }
  },
  {
    title: '操作',
    key: 'action',
    scopedSlots: { customRender: 'action' }
  }
]

const data = [
  {
    id: '1',
    academicTerm: '2024-2024-1',
    course: '计算机科学导论',
    teachingClass: 'CS101-01, CS101-02',
    courseType: '必修',
    teacher: '李红梅',
    status: '启用',
    description: '计算机科学基础课程'
  },
  {
    id: '2',
    academicTerm: '2024-2024-1',
    course: '数据结构',
    teachingClass: 'CS201-01',
    courseType: '必修',
    teacher: '李娜',
    status: '启用',
    description: '数据结构与算法基础'
  },
  {
    id: '3',
    academicTerm: '2024-2024-2',
    course: '人工智能基础',
    teachingClass: 'CS301-01',
    courseType: '选修',
    teacher: '王芳',
    status: '禁用',
    description: '高级人工智能基础'
  }
]

export default {
  data() {
    return {
      data,
      columns,
      selectedRowKeys: [],
      pagination: {
        current: 1,
        pageSize: 10,
        total: data.length,
        showSizeChanger: true,
        showQuickJumper: true
      },
      visible: false,
      confirmLoading: false,
      modalTitle: '新增教学班配置',
      form: this.$form.createForm(this, { name: 'teachingClassForm' }),
      editRecord: null
    }
  },
  methods: {
    onSelectChange(selectedRowKeys) {
      this.selectedRowKeys = selectedRowKeys
    },
    handleTableChange(pagination) {
      this.pagination = pagination
    },
    handleAdd() {
      this.modalTitle = '新增教学班配置'
      this.visible = true
      this.editRecord = null
      this.$nextTick(() => {
        this.form.resetFields()
      })
    },
    handleEdit(record) {
      this.modalTitle = '编辑教学班配置'
      this.visible = true
      this.editRecord = record
      this.$nextTick(() => {
        this.form.setFieldsValue({
          academicTerm: record.academicTerm,
          course: record.course,
          teachingClass: record.teachingClass.split(', '),
          courseType: record.courseType,
          teacher: record.teacher.split(', '),
          status: record.status,
          description: record.description
        })
      })
    },
    handleDelete(record) {
      this.$confirm({
        title: '确认删除',
        content: `确定要删除教学班配置 "${record.course}" 吗?`,
        onOk: () => {
          this.$message.success('删除成功')
        }
      })
    },
    handleBatchDelete() {
      if (this.selectedRowKeys.length === 0) {
        this.$message.warning('请至少选择一条记录')
        return
      }
      this.$confirm({
        title: '确认删除',
        content: `确定要删除选中的 ${this.selectedRowKeys.length} 条记录吗?`,
        onOk: () => {
          this.$message.success('删除成功')
          this.selectedRowKeys = []
        }
      })
    },
    handleOk() {
      this.form.validateFields((err, values) => {
        if (!err) {
          this.confirmLoading = true
          // 模拟API调用
          setTimeout(() => {
            this.confirmLoading = false
            this.visible = false
            this.$message.success(this.editRecord ? '更新成功' : '添加成功')
          }, 1000)
        }
      })
    },
    handleCancel() {
      this.visible = false
    }
  }
}
</script>

<style scoped>
.table-operator {
  margin-bottom: 16px;
}
</style>